<template>
	<div>
		<div class="font-size18 font-bold margin-bottom20 color252630">题目纠错</div>
		<el-form inline :model="query" label-width="80">
			<el-form-item label="模糊搜索">
				<el-input placeholder="请输入用户昵称、手机号、题目信息" v-model="query.userName" class="width300 margin-right30"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="query.status" placeholder="请选择审核状态" class="width300">
					<el-option label="未审核" :value="0"></el-option>
					<el-option label="通过" :value="1"></el-option>
					<el-option label="驳回" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
			<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
		</el-form>
		<div class="margin-top20 row-me">
			<el-button type="primary" @click="handleBatchDel">批量删除</el-button>
			<el-button type="primary" @click="handleBatchExamin">批量审核</el-button>
			<div class="flex1"></div>
			<el-button type="primary" @click="typeVisible=true">纠错类型设置</el-button>
		</div>
		<el-table :data="tableData" border class="margin-top20" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">
			<el-table-column type="expand" width="0">
				<template slot-scope="scope">
					<div style="max-width:50vw;">
						<div class="row-me">
							<span class="color929397 margin-right10">题目</span>
							<div class="flex1 color252525">
								<div>{{scope.row.target.title}}</div>
								<div>
									<div class="margin-top10" v-for="(item,index) in scope.row.target.optionList" :key="index">
										{{item.title}}.{{item.content}}
									</div>
								</div>
							</div>
						</div>
						<div class="row-me margin-top10">
							<span class="color929397 margin-right10">答案</span>
							<div class="color252525 flex1 line-height21"><span
									class="colorEE010B font-weight600 margin-right5">{{scope.row.target.answer}}</span>{{scope.row.target.textExplain}}
							</div>
						</div>
						<div class="row-me row-center margin-top10">
							<span class="color929397 margin-right10">来源</span>
							<div class="row-me flex-wrap flex1">
								<el-tag class="margin-right10" v-for="(item,index) in scope.row.target.examSource"
									:key="index">{{item}}</el-tag>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column label="纠错用户(ID/头像/昵称)" width="180">
				<template slot-scope="scope">
					<div class="row-me row-center">
						<el-image :preview-src-list="[scope.row.headImage]" :src="scope.row.headImage"
							class="width40 height40 radius50Per"></el-image>
						<div class="column-me margin-left5">
							<span>{{scope.row.userId||''}}</span>
							<span>{{scope.row.userName||''}}</span>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="target.title" label="纠错题目" width="600"></el-table-column>
			<el-table-column prop="content" label="纠错内容" width="400"></el-table-column>
			<el-table-column label="图片">
				<template slot-scope="scope">
					<div v-if="scope.row.images" class="row-me">
						<el-image v-for="(item,index) in scope.row.images.split(',')" :key="index" :src="item"
							class="margin-right5 width100 height100" :preview-src-list="[item]"></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="纠错类型" prop="type" align="center" width="110px"> </el-table-column>
			<el-table-column label="电话" prop="phone" align="center" width="110px"> </el-table-column>
			<el-table-column label="状态" align="center" width="110px">
				<template slot-scope="scope">
					{{ scope.row.status == 0 ? '未审核' : scope.row.status == 1 ? '通过' : '驳回' }}
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="纠错时间" width="170px"></el-table-column>
			<el-table-column label="操作" width="300" align="center" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" v-if="scope.row.status == 0" @click="handleSH(scope.row)">审核</el-button>
					<el-button type="text" @click="handleEdit(scope.row)">修改试题
					</el-button>
					<el-button type="text" @click="getHistory(scope.row)">
						查看历史记录({{ scope.row.count }})
					</el-button>
					<el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
						<el-button type="text" slot="reference" class="margin-left10">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<!-- 审核 -->
		<el-dialog title="审核" :visible.sync="examineVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="审核状态">
					<el-select v-model="form.status" placeholder="审核状态" clearable class="width260">
						<el-option label="通过" :value="1"></el-option>
						<el-option label="驳回" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="form.status == 1" label="奖励金额">
					<el-input v-model="form.money" class="width260"></el-input>
				</el-form-item>
				<el-form-item label="回复内容">
					<el-input v-model="form.comment" type="textarea" :rows="6" placeholder="请输入回复内容">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="examineVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleExamineSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 编辑 -->
		<el-dialog title="修改试题" :visible.sync="editVisible" width="70%">
			<examQuestions ref="examQuestions" @handleOk="editVisible=false"></examQuestions>
		</el-dialog>

		<!-- 历史记录查看 -->
		<el-dialog title="历史记录查看" :visible.sync="historyVisible">
			<el-table :data="historyTableData" border class="table" header-cell-class-name="table-header-style">
				<el-table-column label="序号" width="55" align="center">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="content" label="纠错内容"></el-table-column>
				<el-table-column label="纠错类型" prop="type" align="center" width="110px"> </el-table-column>
				<el-table-column prop="createBy" label="纠错人电话" width="120px"></el-table-column>
				<el-table-column label="状态" align="center" width="110px">
					<template slot-scope="scope">
						{{ scope.row.status == 0 ? '未审核' : scope.row.status == 1 ? '通过' : '驳回' }}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="纠错时间" width="170px"></el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total, prev, pager, next" :current-page="historyQuery.pageNumber"
					:page-size="historyQuery.pageSize" :total="historyPageTotal" @current-change="handlePageChange2">
				</el-pagination>
			</div>
		</el-dialog>

		<!-- 纠错类型设置 -->
		<el-dialog title="纠错类型" :visible.sync="typeVisible" width="40%">
			<el-table :data="typeTableData" border>
				<el-table-column label="类型名称" align="center">
					<template slot-scope="{row}">
						<el-input v-model="row.name" v-if="row.isEdit"></el-input>
						<span v-else>{{row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isEdit" @click="handleTypeAdd(scope.row)">保存</el-button>
						<el-button type="text" @click="$set(scope.row,'isEdit',true)" v-else>编辑</el-button>
						<el-popconfirm title="确认删除？" @confirm="handleTypeDel(scope.row.id)">
							<el-button slot="reference" type="text">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="typeQuery.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeTypeChange" :page-size="typeQuery.pageSize"
					:total="pageTypeTotal" @current-change="handlePageTypeChange"></el-pagination>
			</div>
			<div class="margin-top20 row-me center-all">
				<el-input v-model="typeQuery.name" placeholder="请输入分类名称" class="margin-right20 width300"></el-input>
				<el-button type="primary" @click="handleTypeAdd">新增</el-button>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="typeVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import examQuestions from '@/components/examQuestions'
	export default {
		components: {
			examQuestions
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				multipleSelection: [],
				pageTotal: 0,
				examineVisible: false,
				form: {},
				editVisible: false,
				historyQuery: {
					pageNumber: 1,
					pageSize: 30
				},
				historyPageTotal: 0,
				historyTableData: [],
				historyVisible: false,
				typeVisible: false,
				typeQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				pageTypeTotal: 0,
				typeTableData: []
			}
		},
		mounted() {
			this.getData()
			this.getTypeData()
		},
		methods: {
			//获取类型数据
			async getTypeData() {
				const res = await this.$postForm('/admin/user/typeAll', this.typeQuery)
				if (res.code == 1000) {
					this.typeTableData = res.data.list
					this.pageTypeTotal = res.data.totalRow
				}
			},
			//分类分页
			handlePageTypeChange(val) {
				this.typeQuery.pageNumber = val
				this.getTypeData();
			},
			handleSizeTypeChange(val) {
				this.typeQuery.pageSize = val
				this.getTypeData();
			},
			// 新增编辑分类
			handleTypeAdd(row) {
				if (row.id) {
					this.$post('/admin/user/typeUpdate', {
						id: row.id,
						name: row.name
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('编辑成功')
							this.getTypeData()
							row.isEdit = false
						}
					})
				} else {
					this.$post('/admin/user/typeSave', {
						name: this.typeQuery.name
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('新增成功')
							this.getTypeData()
							this.typeQuery.name = ''
						}
					})
				}
			},
			//删除分类
			async handleTypeDel(id) {
				const res = await this.$postForm('/admin/user/typeDelete', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getTypeData()
				}
			},
			//批量删除
			handleBatchDel() {
				this.$confirm('确定要批量删除已选中的题目吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$postForm('/admin/user/deleteUpload', {
						ids
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
							this.multipleSelection = []
						}
					})
				}).catch(() => {})
			},
			//批量审核
			handleBatchExamin() {
				this.$confirm('确定要批量审核已选中的题目吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$postForm('/admin/user/reviewUploadAll', {
						ids,
						status: 1
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量审核成功')
							this.getData()
							this.multipleSelection = []
						}
					})
				}).catch(() => {})
			},
			async getData() {
				const res = await this.$get('/admin/user/pageCorrect', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			// 审核
			handleSH(row) {
				this.form.id = row.id
				this.examineVisible = true;
			},
			async handleExamineSave() {
				if (this.$.isEmpty(this.form.status)) {
					this.$message.warning('请选择审核状态!')
					return
				}
				const res = await this.$get('/admin/user/reviewCorrecting', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.examineVisible = false
					this.getData()
				}
			},
			// 修改试题
			handleEdit(row) {
				setTimeout(() => {
					this.$refs.examQuestions.show(row.id)
				})
				this.editVisible = true
			},
			// 查看历史记录
			getHistory(row) {
				this.historyQuery.questionId = row.questionId
				this.getHistoryData()
				this.historyVisible = true
			},
			async getHistoryData() {
				const res = await this.$get('/admin/user/pageCorrectHistory', this.historyQuery)
				if (res.code == 1000) {
					this.historyTableData = res.data.list
					this.historyPageTotal = res.data.totalRow
				}
			},
			// 删除
			async handleDelete(id) {
				const res = await this.$get('/admin/user/deleteCorrecting', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			handlePageChange2(val) {
				this.historyQuery.pageNumber = val
				this.getHistoryData();
			},
		}
	}
</script>

<style>
</style>